<template>
  <div class="main-container">
    <el-form inline class="mb10">
      <el-button type="primary" @click="createStock()">新建仓库</el-button>
      <el-button type="primary" plain @click="flush()">刷新</el-button>
    </el-form>
    <el-table border :data="stockList" :height="tableHeight" default-expand-all row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="id" label="仓库编号" align="center" min-width="120"> </el-table-column>
      <el-table-column prop="name" label="仓库名称" align="center" min-width="150"></el-table-column>
      <el-table-column prop="level" label="仓库级别" align="center" width="100"></el-table-column>
      <el-table-column prop="content" label="存放内容" align="center" min-width="500"> </el-table-column>
      <el-table-column prop="remark" label="备注" align="center" min-width="200"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="scope">
          <el-button @click="modify(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/修改仓库的弹框 -->
    <el-drawer :visible.sync="drawerOpen" :title="drawerTitle">
      <el-form :data="stock" label-width="100px">
        <el-form-item label="上级仓库">
          <el-cascader v-model="stock.parent" :options="stockOptions" :props="{ checkStrictly: true, expandTrigger: 'hover' }" @change="parentStockChange" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="仓库编号">
          <el-input v-model="stock.id" placeholder="仓库编号"></el-input>
        </el-form-item>
        <el-form-item label="仓库名称">
          <el-input v-model="stock.name" placeholder="仓库名称"></el-input>
        </el-form-item>
        <el-form-item label="仓库级别">
          <span>{{ stock.level }}级仓库</span>
        </el-form-item>
        <el-form-item label="仓库内容">
          <el-input v-model="stock.content" placeholder="仓库内容"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="stock.remark" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="save()" type="primary" size="small">保存</el-button>
          <el-button @click="drawerOpen = false" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import _ from 'lodash'
@Component({
  components: {}
})
export default class SalaryDetail extends Vue {
  tableHeight: any = '800px'
  drawerTitle: any = ''
  drawerOpen: boolean = false
  stockList: any = [
    { id: '01', name: '原材料库', level: 1, content: '采购的用于构成产品的棒、管等原材料', remark: '' },
    { id: '02', name: '毛坯库', level: 1, content: '用于生产的毛坯', remark: '整个半成品状态生命周期' },
    { id: '03', name: '成品库', level: 1, content: '已完工的产品', remark: '' },
    {
      id: '04',
      name: '供方库',
      level: 1,
      content: '已采购/外协发料暂未回厂的物料',
      remark: '采购、外协供方一级库位',
      children: [
        { id: '0401', parent: '04', name: '供方甲库位', level: 2, content: '采购供方甲的物料或发给供方甲外协的物料', remark: '' },
        { id: '0402', parent: '04', name: '供方已库位', level: 2, content: '采购供方已的物料或发给供方已外协的物料', remark: '' }
      ]
    }
  ]
  stockOptions: any = [
    { value: '01', label: '原材料库' },
    { value: '02', label: '毛坯库' },
    { value: '03', label: '成品库' },
    {
      value: '04',
      label: '供方库',
      children: [
        { value: '0401', label: '供方甲库位' },
        { value: '0402', label: '供方已库位' }
      ]
    }
  ]
  stock: any = {
    id: '',
    name: '',
    level: 1,
    content: '',
    remark: ''
  }
  created() {
    // 获取屏幕高度 设置表格高度
    let screenHeight = document.documentElement.clientHeight
    console.log('获取到的屏幕高度：' + screenHeight)
    this.tableHeight = screenHeight - 230 + 'px'
  }
  createStock() {
    this.drawerTitle = '新建仓库'
    this.drawerOpen = true
    this.stock = {
      id: '',
      name: '',
      level: 1,
      content: '',
      remark: '',
      parent: ''
    }
  }
  flush() {
    alert('刷新页面')
  }
  modify(row) {
    this.drawerTitle = '修改仓库'
    this.drawerOpen = true
    this.stock = _.cloneDeep(row)
  }
  remove(row) {
    alert('删除仓库' + row.name)
  }
  save() {
    alert('提交保存')
  }
  parentStockChange(parent) {
    console.log('parent')
    console.log(parent)
    console.log('this.stock')
    console.log(this.stock)

    if (parent.length == 0) {
      // 如果清空，则是1级仓库
      this.stock.level = 1
      this.stock.id = ''
    } else {
      // 如果选择，则为上层仓库的下一级，且编号随上层仓库
      let choosedParentId = parent.pop()
      console.log('choosedParentId')
      console.log(choosedParentId)

      let parentStock
      let findOne = this.stockList.some(function findParent(item) {
        console.log('some find ing')
        console.log(item)

        if (item.id == choosedParentId) {
          parentStock = item
          return true
        }
        return Array.isArray(item.children) && item.children.some(findParent)
      })
      console.log('findOne')
      console.log(findOne)

      // let parentStock = this.stockList.filter(item => item.id == parent[0])[0]
      console.log('parentStock')
      console.log(parentStock)

      this.stock.level = parentStock.level + 1
      this.stock.parent = parentStock.id
      this.stock.id = parentStock.id

      console.log('this.stock')
      console.log(this.stock)
    }
  }
}
</script>

<style >
</style>